<template>
	<view class="page">
		<Header :title="'确认订单'"></Header>
		<view class="top_one" @click="todizhi">
			<image src="../../../static/dinwei.png" mode="aspectFill" class="one_img"></image>
			<view v-if="shopaddres">
				<view class="title">{{shopaddres.address}}{{shopaddres.detail}}</view>
				<view class="pohone">{{shopaddres.contact}} {{shopaddres.phone}}</view>
			</view>
			<view v-else>
				<view class="title">请选择收货地址</view>
			</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>

		<view class="xia_box">
			<view class="xia_name">冒丰数字</view>
			<view class="xia_one">
				<image :src="mood.coverPictureId" mode="aspectFill" class="moimage"></image>
				<view class="marl">
					<view class="MART">{{mood.name}}<span class="san_one">￥</span><span
							style="color: red;">{{mood.unitPrice}}</span>
					</view>
					<view class="san_two">数量：{{mood.number}}</view>
				</view>
			</view>
		</view>

		<view class="two_box">
			<view class="two_din">
				<view class="two_din_box">
					<u-icon name="weixin-fill" color="#00aa00" size="28"></u-icon>
					<view class="two_din_zi">微信支付</view>
				</view>
				<view class="">
					<image src="../../../static/chengong.png" mode="aspectFill" class="two_xiazi"></image>
				</view>
			</view>
		</view>

		<view class="two_box">
			<view class="two_din">
				<view class="two_din_box">
					<u-icon name="coupon" color="#F55726" size="28"></u-icon>
					<view class="two_din_zi">礼品卡</view>
				</view>

				<view class="two_box_flx" v-if="!cardId" @click="showpop=true">
					<view class="two_box_text">
						去选择
					</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>

				<view class="two_box_flx" v-else @click="showpop=true">
					<view class="two_box_text"> 
						已选择礼品卡,金额为<span style="color: red;">{{deductionPrice}}元</span>
					</view>
					<u-icon name="arrow-right" size="15"></u-icon>
				</view>
			</view>
		</view>
		<view class="three_box">
			<view class="three_title">订单备注</view>
			<u-input v-model="value" type="textarea" :border="true" style="margin-top: 20rpx;" placeholder='填写备注' />
		</view>
		<view class="bottom_box">
			<view class="bottom_box_one">
				<view class="bottom_box_la">应付：</view>
				<view class="bottom_box_ba">￥</view>
				<view class="bottom_box_xa">{{payPrice}}</view>
			</view>
			<view class="bottom_box_button" @click="buy">立即支付</view>
		</view>

		<u-popup :show="showpop" @close="closes" :round="20">
		<view class="" style="height: 100rpx;text-align: center;font-size: 40rpx;font-weight: 600;line-height: 100rpx;">选择礼品卡</view>
			<scroll-view scroll-y="true" style="height: 70vh;" v-if="Carmood.length!=0">
				<view>
					<view class="cradBox" v-for="(item,i) in Carmood">
						<image :src="item.front" class="carImg" mode="aspectFill"></image>
						<view class="money">{{item.money}}元</view>
						<view class="name">{{item.name}}</view>
						<view class="time">{{item.createTime}}到{{item.expirationTime}}</view>
						<view class="change">
							<u-switch
								space="2" v-model="item.show" activeColor="#f9ae3d"
								inactiveColor="rgb(230, 230, 230)">
							</u-switch>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" style="height: 70vh;" v-else>
				<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png" text='暂未查询可用礼品卡'>
				</u-empty>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				number: 1,
				Carmood: [],
				value: '',
				mood: {},
				cont: 0,
				shopaddres: null,
				totalPrice: 0,
				payPrice:0,
				showpop: false,
				deductionPrice:0,
				cardId:''
			}
		},
		components:{
			Header
		},
		onShow() {
			if (uni.getStorageSync('shopaddress')) {
				this.shopaddres = JSON.parse(uni.getStorageSync('shopaddress'))
			} else {
				this.address()
			}
			if (uni.getStorageSync('shopMood')) {
				this.mood = JSON.parse(uni.getStorageSync('shopMood'))
				this.totalPrice = (this.mood.number * 1) * (this.mood.unitPrice)
				this.totalPrice = this.totalPrice.toFixed(2)
				console.log(this.totalPrice)
				this.payPrice = this.totalPrice
				this.card()
			}
		},
		methods: {
			closes(){
				let money = 0
				let cardID= []
				let cont = JSON.parse(JSON.stringify(this.Carmood))
				cont.forEach((item,i)=>{
					if(item.show){
						money+=item.money*1
						cardID.push(item.id)
					}
				})
				cardID=cardID.join()
				this.cardId= cardID
				this.deductionPrice = money
				this.payPrice = (this.totalPrice-this.deductionPrice).toFixed(2)
				if(this.payPrice<0){
					this.payPrice = 0
				}
				this.showpop=false
			},
			async address() {
				//地址列表
				let res = await this.$api.request('system/address/user/defaults')
				this.shopaddres = res.data
			},
			async card() {
				//礼品卡
				let res = await this.$api.request('manage/card/client/list', 'get', {
					typeId: this.mood.typeId
				})
				this.Carmood = res.data.list

				this.Carmood.forEach((item, i) => {
					item.show = false
				})
				this.Carmood = JSON.parse(JSON.stringify(this.Carmood))
			},
			// 支付
			async buy() {
				console.log(this.shopaddres)
				if(this.shopaddres==null){
					uni.showToast({
					    title: '请先选择收货地址',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				let moeby = 0
				if(this.deductionPrice-this.totalPrice>0){
					moeby = this.deductionPrice-(this.deductionPrice-this.totalPrice)
				}else{
					moeby= this.deductionPrice
				}
				let formdata = {
					// addressId: this.shopaddres.id,
					// totalNum: this.mood.number,
					// totalPrice: this.totalPrice,
					// payPrice: this.payPrice,
					// productId: this.mood.id,
					// deductionPrice: moeby.toFixed(2),
					// mark:this.value,
					// cardId: this.cardId,
					id:this.mood.buyId,
					addressId: this.shopaddres.id, //地址
					channelCode:'wx_lite',
					channelExtras:'',
					scence:2
				}
				//商品购买
				let res = await this.$api.request('pay/order/submit', 'post', formdata)
				if (res.code == '200') {
					if(!this.payPrice){
						uni.removeStorageSync('shopaddress')
						uni.removeStorageSync('shopMood')
						uni.navigateTo({
							url: '/pages/index/success?cont=1'
						})
					}else{
						let mood = JSON.parse(res.data.displayContent)
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							timeStamp: mood.timeStamp, // 时间戳
							nonceStr: mood.nonceStr, // 随机字符串
							package: mood.packageValue,
							signType: mood.signType, // 签名算法
							paySign: mood.paySign, // 签名
							success: function(res) {
								console.log('支付成功', res);
								uni.removeStorageSync('shopaddress')
								uni.removeStorageSync('shopMood')
								uni.redirectTo({
									url: '/pages/index/success?cont=1'
								})
							},
							fail: function(err) {
								console.log('支付失败', err);
							}
						});
					}
					
					
				}
			},
			todizhi() {
				uni.navigateTo({
					url: '/pages/my/serve/address?cont=1'
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		background-color: #f5f5f5;
		height: 100vh;
	}
	.add {
		width: 200rpx;

	}

	.time {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 82%;
		left: 40%;
	}

	.change {
		position: absolute;
		top: 42%;
		right: 5%;
	}

	.cradBox {
		width: 710rpx;
		height: 360rpx;
		position: relative;
		margin-left: 45rpx;
		margin-top: 20rpx;
	}

	.carImg {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		position: absolute;
	}

	.money {
		color: #fff;
		font-weight: 600;
		font-size: 50rpx;
		position: absolute;
		top: 40%;
		left: 20%;
	}

	.name {
		width: 170rpx;
		height: 55rpx;
		color: #D42A1B;
		text-align: center;
		background-color: #fff;
		line-height: 55rpx;
		position: absolute;
		top: 80%;
		left: 10%;
		border-radius: 23rpx;
		font-size: 26rpx;
	}

	.two_box_flx {
		display: flex;
		align-items: center;
	}

	.two_box_text {
		color: #999;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.bottom_box_ba {
		font-size: 30rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_xa {
		font-size: 46rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_la {
		font-size: 30rpx;
	}

	.three_title {
		font-size: 25rpx;
	}

	.three_box {
		width: 710rpx;
		padding: 20rpx;
		margin-left: 15rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.two_xiazi {
		width: 40rpx;
		height: 40rpx;
	}

	.two_din_zi {
		margin-left: 15rpx;
	}

	.two_din_img {
		width: 50rpx;
		height: 50rpx;
	}

	.two_din_box {
		display: flex;
		align-items: center;
	}

	.two_din {
		display: flex;
		justify-content: space-between;
	}

	.two_box {
		width: 710rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 20rpx;
		margin-left: 15rpx;
	}

	.san_two {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.san_one {
		font-size: 24rpx;
		margin-left: 40rpx;
		color: red;
	}

	.MART {
		font-weight: 600;
	}

	.marl {
		margin-left: 20rpx;
	}

	.moimage {
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.xia_one {
		margin-top: 20rpx;
		display: flex;
	}

	.xia_name {
		font-size: 24rpx;
	}

	.xia_box {
		width: 710rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-left: 15rpx;
		border-radius: 10rpx;
	}

	.shuimg {
		width: 11rpx;
		height: 18rpx;
		margin-top: 15rpx;
	}

	.pohone {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.title {
		width: 490rpx;
	}

	.one_img {
		width: 30rpx;
		height: 36rpx;
		margin-top: 15rpx;
	}

	.top_one {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 40rpx;
		padding-top: 30rpx;
		display: flex;
		margin-left: 15rpx;
		justify-content: space-between;
	}

	.bottom_box_button {
		width: 266rpx;
		height: 65rpx;
		text-align: center;
		line-height: 65rpx;
		color: #fff;
		border-radius: 32.5rpx;
		background-color: #D42A1B;
		margin-right: 50rpx;
	}

	.bottom_box_one {
		display: flex;
		margin-left: 40rpx;
		align-items: center;
	}

	.bottom_box {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 15rpx;
		position: fixed;
		bottom: 0%;
	}
</style>